<template>
	<view class="wxRegister">
		<view class="form">
			<u--form labelPosition="left" :model="formData" :rules="rules" ref="form">
				<u-form-item label="邮箱" labelWidth="160rpx" prop="email" borderBottom>
					<u--input v-model="formData.email" type="email" border="none" placeholder="请输入邮箱"></u--input>
				</u-form-item>
				<u-form-item label="密码" labelWidth="160rpx" prop="password" borderBottom>
					<u--input
						v-model="formData.password"
						type="password"
						border="none"
						placeholder="请输入密码"
					></u--input>
				</u-form-item>
				<u-form-item label="昵称" labelWidth="160rpx" prop="username" borderBottom>
					<u--input v-model="formData.username" border="none" placeholder="支持字母，数字，下划线"></u--input>
				</u-form-item>
				<u-form-item label="验证码" labelWidth="160rpx" prop="captcha" borderBottom>
					<u--input v-model="formData.captcha" border="none" placeholder="请输入验证码"></u--input>
					<template #right>
						<view style="display: flex; align-items: center;">
							<image
								style="width: 236rpx;height: 80rpx;"
								:src="formData.captcha_img"
								mode=""
								@click="getCaptcha"
							></image>
						</view>
					</template>
				</u-form-item>
			</u--form>
		</view>

		<view class="btn_login">
			<button class="btn" plain :loading="loading" @click="register">注册并绑定</button>
		</view>
	</view>
</template>

<script>
import api from '@/common/api.js';
export default {
	data() {
		return {
			formData: {
				email: '',
				password: '',
				username: '',
				captcha: '',
				captcha_key: '',
				captcha_img: ''
			},
			rules: {
				email: {
					validator: (rule, value, callback) => {
						return uni.$u.test.email(value);
					},
					message: '邮箱不正确',
					trigger: ['blur']
				},
				password: {
					type: 'string',
					required: true,
					message: '请输入密码',
					trigger: ['blur']
				},
				username: {
					type: 'string',
					required: true,
					message: '请输入昵称',
					trigger: ['blur']
				},
				captcha: {
					type: 'string',
					required: true,
					message: '请输入验证码',
					trigger: ['blur']
				}
			},
			loading: false
		};
	},
	onLoad() {
		this.getCaptcha();
	},
	onReady() {
		this.$refs.form.setRules(this.rules);
	},
	methods: {
		// 获取验证码
		async getCaptcha() {
			try {
				let res = await this.$ajax.get(api.reg_captcha);
				this.formData.captcha_key = res.data.data.key;
				this.formData.captcha_img = res.data.data.img;
			} catch (e) {
				console.log(e);
			}
		},

		async register() {
			let isPass = await this.validateForm();
			// console.log('isPass ==>', isPass);
			if (!isPass) {
				return false;
			}
			this.loading = true;
			let params = {
				email: this.formData.email,
				password: this.formData.password,
				nick_name: this.formData.username,
				captcha: this.formData.captcha,
				key: this.formData.captcha_key,
				open_id: uni.getStorageSync('openid')
			};
			try {
				let res = await this.$ajax.post(api.register, params);
				console.log('registerRes ==>', res);
				if (res.data.code == '200') {
					uni.setStorageSync('access_token', res.data.data.access_token);
					this.$store.commit('login', res.data.data.user);
					// console.log('isLogin1 ==>', this.$store.state.isLogin);
					uni.showToast({
						title: '绑定成功',
						complete: () => {
							setTimeout(() => {
								uni.navigateBack({
									delta: 3
								});
							}, 1000);
						}
					});
				}
				this.loading = false;
			} catch (e) {
				console.log(e);
				this.loading = false;
				uni.showToast({
					title: e.data.message,
					icon: 'error'
				});
			}
		},

		// 表单验证的方法
		validateForm() {
			return new Promise((resolve, reject) => {
				this.$refs.form
					.validate()
					.then(res => {
						resolve(true);
					})
					.catch(err => {
						resolve(false);
					});
			});
		}
	}
};
</script>

<style lang="scss">
.wxRegister {
	.form {
		padding: 0 32rpx;
	}
	.btn_login {
		margin: 40rpx 32rpx;
	}
	.btn {
		height: 88rpx;
		line-height: 88rpx;
		background-color: #1890FF;
		color: #fff;
		border: 2rpx solid #1890FF;
		border-radius: 44rpx;
		font-size: 28rpx;
		font-weight: 700;
	}
}
</style>
